<template>
  <div class="page-container">
    <main class="home">
      <a-empty v-if="pageState.list.length == 0" description="没有找到文章哦"/>
      <div v-else>
        <ArticleCard
            v-for="(item, idx) in pageState.list"
            :key="item.id"
            :info="item"
        />
        <a-button
            class="more-btn"
            :loading="pageState.loading"
            @click="loadingMore"
            :disabled="pageState.btnStatus != 1"
        >
          {{ BTN_STATUS[pageState.btnStatus] }}
        </a-button>
      </div>
    </main>
    <aside>
      <Account/>
      <Category/>
      <Tag/>
    </aside>
  </div>
</template>

<script>
import { reactive, ref, watch, watchEffect } from "vue"
import { useRoute, onBeforeRouteUpdate } from "vue-router"
import { ArticleCard } from "@/components"
import { selectByPage } from "@/api/article"
import useTag from "@/hooks/tag"
import useCategory from "@/hooks/category"
import { BTN_STATUS } from "@/config"
import { usePager } from "@/hooks"


import Account from "@/components/Aside/Account.vue";
import Category from "@/components/Aside/Category.vue";
import Tag from "@/components/Aside/Tag.vue";

export default {
  name: "Home",
  components: { Account, Category, Tag, ArticleCard },
  setup() {
    const { getTagList } = useTag()
    const { getCateList } = useCategory()

    // 将路由参数作为接口请求参数传入
    const { query } = useRoute()
    const queryParmas = reactive(query)
    const { pageState, queryData, loadingMore } = usePager(selectByPage)

    // 获取数据
    // 标签数据
    getTagList()
    // 分类数据
    getCateList()
    // 文章数据
    queryData(queryParmas)

    // 页面未跳转，仅路由发生变化
    onBeforeRouteUpdate(({ query }) => {
      queryParmas.tag = query.tag
      queryParmas.category = query.category
      queryData(queryParmas)
    })

    return {
      pageState,
      BTN_STATUS,
      loadingMore,
    }
  },
}
</script>
<style lang="less" scoped>
.home {
  min-height: 500px;

  img {
    width: 100%;
  }
}

.more-btn {
  display: block;
  margin: 0 auto;
}
</style>
